<template>
  <div class="headerNav">
    <!-- 头部导航 -->
    <div class="header">
      <div
        class="left iconfont icon-user"
        @click="$router.push('/userInfo')"
      ></div>
      <div class="center">MUSIC-VUE</div>
      <div
        class="right iconfont icon-search"
        @click="$router.push('/search')"
      ></div>
    </div>
    <!-- 导航按钮 -->
    <div class="navs">
      <router-link tag="div" to="/recommend" class="item">
        <span>推荐</span>
      </router-link>
      <router-link tag="div" to="/rank" class="item">
        <span>排行榜</span>
      </router-link>
      <router-link tag="div" to="/singer" class="item">
        <span>歌手</span>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.headerNav {
  width: 100%;
  z-index: 1;
  height: 12vh;
  .header {
    color: #191515;
    font-weight: 600;
    height: 6vh;
    line-height: 6vh;
    display: flex;
    text-align: center;

    .left,
    .right {
      flex: 0 0 40px;
      font-size: 18px;
    }
    .center {
      flex: 1;
    }
  }
  .navs {
    height: 6vh;
    line-height: 6vh;
    display: flex;
    color: #191515;
    .item {
      flex: 1;
      text-align: center;
      font-size: 14px;
      span {
        font-weight: 600;
        display: inline-block;
        height: 21px;
        line-height: 21px;
        border-bottom: 2px solid transparent;
      }
      &.router-link-active span {
        border-color: #191515;
        font-weight: bold;
      }
    }
  }
}
</style>
